<template><div><h2 id="引入实验" tabindex="-1"><a class="header-anchor" href="#引入实验"><span>引入实验</span></a></h2>
<p>实现列表拖拽并排序的效果(https://vuejs-core.cn/shop-vite/#/other/drag)</p>
<p><strong>博客代码演示插件有bug,排序效果还是去沙箱看吧</strong></p>
<VPDemoNormal :config="DemoContainer9"><div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>拖拽api&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#D19A66">        .list</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">            width: </span><span style="color:#D19A66">100</span><span style="color:#E06C75">%</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            padding: </span><span style="color:#D19A66">20</span><span style="color:#E06C75">px</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            box-sizing: </span><span style="color:#D19A66">border-box</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            display: </span><span style="color:#D19A66">grid</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            grid-template-columns: </span><span style="color:#56B6C2">repeat</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">4</span><span style="color:#ABB2BF">, </span><span style="color:#D19A66">1</span><span style="color:#E06C75">fr</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">            gap: </span><span style="color:#D19A66">10</span><span style="color:#E06C75">px</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D19A66">        .item</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">            width: </span><span style="color:#D19A66">100</span><span style="color:#E06C75">%</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            height: </span><span style="color:#D19A66">100</span><span style="color:#E06C75">px</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            background-color: </span><span style="color:#D19A66">aqua</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            margin: </span><span style="color:#D19A66">10</span><span style="color:#E06C75">px</span><span style="color:#D19A66"> 0</span><span style="color:#E06C75">px</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            text-align: </span><span style="color:#D19A66">center</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            line-height: </span><span style="color:#D19A66">100</span><span style="color:#E06C75">px</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            border-radius: </span><span style="color:#D19A66">40</span><span style="color:#E06C75">px</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D19A66">        .item.moving</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">            background-color: </span><span style="color:#D19A66">#ccc</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">            /* 拖拽时的背景颜色 */</span></span>
<span class="line"><span style="color:#ABB2BF">            color: </span><span style="color:#D19A66">transparent</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">            /* 拖拽时的文本颜色 */</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"list"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> draggable</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"true"</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"item"</span><span style="color:#ABB2BF">>1&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">> </span><span style="color:#7F848E;font-style:italic">&#x3C;!-- draggable="true" 变成可拖拽 --></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> draggable</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"true"</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"item"</span><span style="color:#ABB2BF">>2&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> draggable</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"true"</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"item"</span><span style="color:#ABB2BF">>3&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> draggable</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"true"</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"item"</span><span style="color:#ABB2BF">>4&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> draggable</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"true"</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"item"</span><span style="color:#ABB2BF">>5&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> draggable</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"true"</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"item"</span><span style="color:#ABB2BF">>6&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> draggable</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"true"</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"item"</span><span style="color:#ABB2BF">>7&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> draggable</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"true"</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"item"</span><span style="color:#ABB2BF">>8&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> draggable</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"true"</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"item"</span><span style="color:#ABB2BF">>9&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#C678DD">        const</span><span style="color:#E5C07B"> list</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> document</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">querySelector</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'.list'</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 找到list</span></span>
<span class="line"><span style="color:#C678DD">        let</span><span style="color:#E06C75"> source</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">// 拖动的元素</span></span>
<span class="line"><span style="color:#E5C07B">        list</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">ondragstart</span><span style="color:#56B6C2"> =</span><span style="color:#E06C75;font-style:italic"> e</span><span style="color:#C678DD"> =></span><span style="color:#ABB2BF"> { </span><span style="color:#7F848E;font-style:italic">// 监听父元素开始拖拽</span></span>
<span class="line"><span style="color:#61AFEF">            setTimeout</span><span style="color:#ABB2BF">(() </span><span style="color:#C678DD">=></span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#E5C07B">                e</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">target</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">classList</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">add</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'moving'</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 拖拽元素添加moving类</span></span>
<span class="line"><span style="color:#ABB2BF">            }, </span><span style="color:#D19A66">0</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E06C75">            source</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> e</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">target</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">// 拖动的元素</span></span>
<span class="line"><span style="color:#ABB2BF">        };</span></span>
<span class="line"><span style="color:#E5C07B">        list</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">ondragenter</span><span style="color:#56B6C2"> =</span><span style="color:#E06C75;font-style:italic"> e</span><span style="color:#C678DD"> =></span><span style="color:#ABB2BF"> { </span><span style="color:#7F848E;font-style:italic">// 元素位置发生改变，进行排序</span></span>
<span class="line"><span style="color:#C678DD">            const</span><span style="color:#E5C07B"> target</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> e</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">target</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">// 现在的元素的位置</span></span>
<span class="line"><span style="color:#C678DD">            if</span><span style="color:#ABB2BF"> (</span><span style="color:#56B6C2">!</span><span style="color:#E06C75">source</span><span style="color:#ABB2BF">) </span><span style="color:#C678DD">return</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">// 没有元素直接返回</span></span>
<span class="line"><span style="color:#C678DD">            if</span><span style="color:#ABB2BF"> (</span><span style="color:#E06C75">target</span><span style="color:#56B6C2"> ===</span><span style="color:#E06C75"> source</span><span style="color:#56B6C2"> ||</span><span style="color:#E06C75"> target</span><span style="color:#56B6C2"> ===</span><span style="color:#E06C75"> list</span><span style="color:#ABB2BF">) </span><span style="color:#C678DD">return</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">// 自己和自己不进行排序</span></span>
<span class="line"><span style="color:#C678DD">            const</span><span style="color:#E5C07B"> sourceIndex</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> Array</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">from</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">source</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">parentNode</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">children</span><span style="color:#ABB2BF">).</span><span style="color:#61AFEF">indexOf</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">source</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 找到拖动元素的索引</span></span>
<span class="line"><span style="color:#C678DD">            const</span><span style="color:#E5C07B"> targetIndex</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> Array</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">from</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">target</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">parentNode</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">children</span><span style="color:#ABB2BF">).</span><span style="color:#61AFEF">indexOf</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">target</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 找到现在元素的索引</span></span>
<span class="line"><span style="color:#C678DD">            if</span><span style="color:#ABB2BF"> (</span><span style="color:#E06C75">sourceIndex</span><span style="color:#56B6C2"> ></span><span style="color:#E06C75"> targetIndex</span><span style="color:#ABB2BF">) { </span><span style="color:#7F848E;font-style:italic">// 拖动的元素比现在的元素大，插入在现在元素的前面</span></span>
<span class="line"><span style="color:#E5C07B">                target</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">parentNode</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">insertBefore</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">source</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">target</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">            } </span><span style="color:#C678DD">else</span><span style="color:#ABB2BF"> { </span><span style="color:#7F848E;font-style:italic">// 拖动的元素比现在的元素小，插入在现在元素的后面        </span></span>
<span class="line"><span style="color:#E5C07B">                target</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">parentNode</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">insertBefore</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">source</span><span style="color:#ABB2BF">, </span><span style="color:#E5C07B">target</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">nextSibling</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">            }</span></span>
<span class="line"><span style="color:#ABB2BF">        };</span></span>
<span class="line"><span style="color:#E5C07B">        list</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">ondragend</span><span style="color:#56B6C2"> =</span><span style="color:#E06C75;font-style:italic"> e</span><span style="color:#C678DD"> =></span><span style="color:#ABB2BF"> { </span><span style="color:#7F848E;font-style:italic">// 拖拽结束</span></span>
<span class="line"><span style="color:#E5C07B">            e</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">target</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">classList</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">remove</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'moving'</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 移除moving类</span></span>
<span class="line"><span style="color:#E06C75">            source</span><span style="color:#56B6C2"> =</span><span style="color:#D19A66"> null</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">// 拖动的元素为空</span></span>
<span class="line"><span style="color:#ABB2BF">        };</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div></VPDemoNormal><h2 id="补充" tabindex="-1"><a class="header-anchor" href="#补充"><span>补充</span></a></h2>
<h3 id="行内元素" tabindex="-1"><a class="header-anchor" href="#行内元素"><span>行内元素</span></a></h3>
<ul>
<li>宽度，高度由内容决定，无法指定宽高</li>
<li>margin左右且设置为数值有效，上下无效，padding上下左右有效即在contentbox下会撑大</li>
<li>当视窗大小过小时内容会换行</li>
</ul>
<h3 id="块元素" tabindex="-1"><a class="header-anchor" href="#块元素"><span>块元素</span></a></h3>
<ul>
<li>宽度默认占一行，高度由内容决定，可以指定宽和高</li>
<li>margin和padding的上下左右均对其有效</li>
<li>当视窗大小过小时内容会换行</li>
</ul>
<h3 id="行内块元素" tabindex="-1"><a class="header-anchor" href="#行内块元素"><span>行内块元素</span></a></h3>
<p>其实就是块元素不默认占一行了，用多少占多少，且带了一个5px默认左右外边距</p>
<h3 id="标签之间相互转换" tabindex="-1"><a class="header-anchor" href="#标签之间相互转换"><span>标签之间相互转换</span></a></h3>
<p>就是使用display属性进行块元素，行内元素进行互相转化。</p>
<blockquote>
<p>这里的display理解成画图软件时拉出来的框。</p>
</blockquote>
<h2 id="补充实验" tabindex="-1"><a class="header-anchor" href="#补充实验"><span>补充实验</span></a></h2>
<h3 id="三个块元素沿中轴线对齐" tabindex="-1"><a class="header-anchor" href="#三个块元素沿中轴线对齐"><span>三个块元素沿中轴线对齐</span></a></h3>
<VPDemoNormal :config="DemoContainer78"><div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>块级元素中轴线居中&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#E06C75">        body</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">            text-align: </span><span style="color:#D19A66">center</span><span style="color:#ABB2BF">; </span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#D19A66">        .block</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">            display: </span><span style="color:#D19A66">inline-block</span><span style="color:#ABB2BF">; </span></span>
<span class="line"><span style="color:#ABB2BF">            background-color: </span><span style="color:#D19A66">#3498db</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            vertical-align: </span><span style="color:#D19A66">middle</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            margin: </span><span style="color:#D19A66">10</span><span style="color:#E06C75">px</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"block"</span><span style="color:#D19A66"> style</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width: 100px; height: 100px;"</span><span style="color:#ABB2BF">>&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"block"</span><span style="color:#D19A66"> style</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width: 100px; height: 120px;"</span><span style="color:#ABB2BF">>&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"block"</span><span style="color:#D19A66"> style</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width: 100px; height: 140px;"</span><span style="color:#ABB2BF">>&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div></VPDemoNormal><h3 id="三个行级元素垂直对齐" tabindex="-1"><a class="header-anchor" href="#三个行级元素垂直对齐"><span>三个行级元素垂直对齐</span></a></h3>
<VPDemoNormal :config="DemoContainer84"><div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>行级元素垂直居中&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#E06C75">        body</span><span style="color:#ABB2BF">{</span></span>
<span class="line"><span style="color:#ABB2BF">            text-align: </span><span style="color:#D19A66">center</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#E06C75">        span</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">            display: </span><span style="color:#D19A66">block</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    &#x3C;!-- 三个行级元素 --></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">span</span><span style="color:#ABB2BF">>1&#x3C;/</span><span style="color:#E06C75">span</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">span</span><span style="color:#ABB2BF">>2&#x3C;/</span><span style="color:#E06C75">span</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">span</span><span style="color:#ABB2BF">>3&#x3C;/</span><span style="color:#E06C75">span</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div></VPDemoNormal><h2 id="流式布局" tabindex="-1"><a class="header-anchor" href="#流式布局"><span>流式布局</span></a></h2>
<p>默认布局方式，对于块级元素，同级的块元素会垂直排布，而内联元素会横向排布。块级元素默认宽度占满父元素。</p>
<blockquote>
<p>参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow</p>
</blockquote>
<h2 id="网格布局" tabindex="-1"><a class="header-anchor" href="#网格布局"><span>网格布局</span></a></h2>
<p>一个二维布局，对页面进行大体上的分块。</p>
<blockquote>
<p>多种写法：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout</p>
</blockquote>
<p>我觉得还不错的写法</p>
<VPDemoNormal :config="DemoContainer112"><div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>Document&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#E06C75">        html</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">{</span></span>
<span class="line"><span style="color:#ABB2BF">            margin: </span><span style="color:#D19A66">0</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            padding: </span><span style="color:#D19A66">0</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#D19A66">        .Header</span><span style="color:#ABB2BF">{</span></span>
<span class="line"><span style="color:#ABB2BF">            grid-area: Header;</span></span>
<span class="line"><span style="color:#ABB2BF">            border: </span><span style="color:#D19A66">aqua</span><span style="color:#D19A66"> 1</span><span style="color:#E06C75">px</span><span style="color:#D19A66"> solid</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#D19A66">        .Sider</span><span style="color:#ABB2BF">{</span></span>
<span class="line"><span style="color:#ABB2BF">            grid-area: Sider;</span></span>
<span class="line"><span style="color:#ABB2BF">            border: </span><span style="color:#D19A66">aqua</span><span style="color:#D19A66"> 1</span><span style="color:#E06C75">px</span><span style="color:#D19A66"> solid</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#D19A66">        .Mainer</span><span style="color:#ABB2BF">{</span></span>
<span class="line"><span style="color:#ABB2BF">            grid-area: Mainer;</span></span>
<span class="line"><span style="color:#ABB2BF">            border: </span><span style="color:#D19A66">aqua</span><span style="color:#D19A66"> 1</span><span style="color:#E06C75">px</span><span style="color:#D19A66"> solid</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#D19A66">        .Footer</span><span style="color:#ABB2BF">{</span></span>
<span class="line"><span style="color:#ABB2BF">            grid-area: Footer;</span></span>
<span class="line"><span style="color:#ABB2BF">            border: </span><span style="color:#D19A66">aqua</span><span style="color:#D19A66"> 1</span><span style="color:#E06C75">px</span><span style="color:#D19A66"> solid</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#D19A66">        .parent</span><span style="color:#ABB2BF">{</span></span>
<span class="line"><span style="color:#ABB2BF">            display: </span><span style="color:#D19A66">grid</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            grid-template-rows: </span><span style="color:#D19A66">1</span><span style="color:#E06C75">fr</span><span style="color:#D19A66"> 3</span><span style="color:#E06C75">fr</span><span style="color:#D19A66"> 1</span><span style="color:#E06C75">fr</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            grid-template-columns: </span><span style="color:#D19A66">1</span><span style="color:#E06C75">fr</span><span style="color:#D19A66"> 3</span><span style="color:#E06C75">fr</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            grid-template-areas: </span></span>
<span class="line"><span style="color:#98C379">            "Header Header"</span></span>
<span class="line"><span style="color:#98C379">            "Sider Mainer"</span></span>
<span class="line"><span style="color:#98C379">            "Footer Footer"</span><span style="color:#ABB2BF">;  </span><span style="color:#7F848E;font-style:italic">/** 一个引号就是一行 和上面得网格对齐 */</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"parent"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"Header"</span><span style="color:#ABB2BF">>Header&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"Sider"</span><span style="color:#ABB2BF">>Sider&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"Mainer"</span><span style="color:#ABB2BF">>Mainer&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"Footer"</span><span style="color:#ABB2BF">>Footer&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div></VPDemoNormal><h2 id="flex布局" tabindex="-1"><a class="header-anchor" href="#flex布局"><span>flex布局</span></a></h2>
<p>一维布局，控制一条轴上，所有子元素的排列方式，默认主轴为横轴，交叉轴为纵轴。</p>
<blockquote>
<p>参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox</p>
</blockquote>
<h2 id="绝对定位与相对定位" tabindex="-1"><a class="header-anchor" href="#绝对定位与相对定位"><span>绝对定位与相对定位</span></a></h2>
<p>将某个元素<strong>positon</strong>这个属性设置为relative为相对定位，absolute为绝对定位<br>
<strong>相对定位</strong>：就是自己的在dom中的位置不改变，但是在浏览器展示的时候会发生变化<br>
<strong>绝对定位</strong>：从父节点一路找到body节点为止找到相对定位的元素，以这个元素做固定位置</p>
<blockquote>
<p>参考：https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/CSS_layout/Positioning</p>
</blockquote>
<h2 id="z-index的作用" tabindex="-1"><a class="header-anchor" href="#z-index的作用"><span>z-index的作用</span></a></h2>
<p>控制某个元素的渲染顺序，调整整个页面的层叠上下文<br>
<strong>z-index:auto</strong> 默认根据后出现的元素会覆盖到前面出现的元素<br>
<strong>z-index: int</strong> 后面的数字越大越在上面，如果依附在更高层级上的盒子，则把父元素结合子元素的z-index理解成版本号，进行顺序的层叠</p>
<blockquote>
<p>参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_positioned_layout/Stacking_context</p>
</blockquote>
<h2 id="html元素display属性有几种" tabindex="-1"><a class="header-anchor" href="#html元素display属性有几种"><span>html元素display属性有几种</span></a></h2>
<div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">display: block; /** 块级元素下个元素换行 */</span></span>
<span class="line"><span style="color:#ABB2BF">display: inline; /** 行级元素下个元素不换行 */</span></span>
<span class="line"><span style="color:#ABB2BF">display: inline-block; /** 行块级元素 */</span></span>
<span class="line"><span style="color:#ABB2BF">display: flex; /** 子元素成flex布局 */</span></span>
<span class="line"><span style="color:#ABB2BF">display: inline-flex; /** 元素本身成为行内元素，子元素成flex布局 */</span></span>
<span class="line"><span style="color:#ABB2BF">display: grid; /** 子元素成网格布局 */</span></span>
<span class="line"><span style="color:#ABB2BF">display: inline-grid; /** 元素本身成为行内元素，子元素成网格布局 */</span></span>
<span class="line"><span style="color:#ABB2BF">...</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/display<br>
https://blog.csdn.net/qq_40561863/article/details/129863600</p>
</blockquote>
<div class="hint-container tip">
<p class="hint-container-title">目前理解</p>
<p>使用网格布局+媒体查询控制整体的布局,子区域内使用flex布局</p>
</div>
</div></template>


<script setup>
import DemoContainer112 from 'C:/core-data/develop/code/custom/hmz-blog/docs/.vuepress/.temp/md-power/demo/normal/notes-每周一学-2.第二周学习-1.布局与拖拽-DemoContainer112.js';
import DemoContainer84 from 'C:/core-data/develop/code/custom/hmz-blog/docs/.vuepress/.temp/md-power/demo/normal/notes-每周一学-2.第二周学习-1.布局与拖拽-DemoContainer84.js';
import DemoContainer78 from 'C:/core-data/develop/code/custom/hmz-blog/docs/.vuepress/.temp/md-power/demo/normal/notes-每周一学-2.第二周学习-1.布局与拖拽-DemoContainer78.js';
import DemoContainer9 from 'C:/core-data/develop/code/custom/hmz-blog/docs/.vuepress/.temp/md-power/demo/normal/notes-每周一学-2.第二周学习-1.布局与拖拽-DemoContainer9.js';
</script>